<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/offcanvas/">

    <title>商品详情页</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/justified-nav/">

    <title>在线书城首页</title>

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/justified-nav/justified-nav.css"
          rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->

    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie-emulation-modes-warning.js"></script>
</head>

<body>
<div class="container">
    <!-- The justified navigation menu is meant for single line per list item.
   Multiple lines will require custom code not provided by Bootstrap. -->
    <div class="masthead">
        <div class="row">
            <div class="col-md-6">
                <h3 class="text-muted">在线书城</h3>
                <h4 class="text-muted">bookstore.com</h4>
            </div>
            <div class="col-md-6">
                <div style="float: right;">
                    <nav>
                        <ul class="nav nav-pills">
                            <li><a href="#">我的账户</a></li>
                            <li><a href="./product_cart.jsp">购物车</a></li>

                            <li><a href="#">新用户注册</a></li>
                            <li><a href="#">帮助中心</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入图书名称">
                            <span class="input-group-btn">
										<button class="btn btn-default" type="button">搜索</button>
									</span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </div>
        </div>


        <nav>
            <ul class="nav nav-justified">
                <li><a href="../index.html">首页</a></li>
                <li><a href="#">文学</a></li>
                <li><a href="#">经管</a></li>
                <li><a href="#">励志</a></li>
                <li><a href="#">艺术</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">生活百科</a></li>
                <li class="active"><a href="./product_list.html">全部分类</a></li>
            </ul>
        </nav>
    </div>
    <div class="row row-offcanvas-right" style="margin: 50px;">
        <div class="col-md-4" align="center">
            <img src="../productImg/dayongxiaohua.jpg" style="width: 300px; height: 300px;" alt="..."
                 class="img-thumbnail">
            <div>
                <button id="add_to_cart" class="btn btn-primary">加入购物车</button>
                <button class="btn btn-warning">返回</button>
            </div>
        </div>
        <div class="col-md-8">
            <input type="hidden" id="product_id" name="id" value="1"/>
            <h2>商品名称 <small><span id="product_name">大勇和小花</span> </small></h2>
            <h2>售价 <small>￥<span id="price">10.00</span> </small></h2>
            <h2>类别 <small> <span id="category">文学</span></small></h2>
            <h2>内容简介 <small><span id="description">这是一本文学小说。</span></small></h2>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; 2016 Company, Inc.</p>
    </footer>

</div>
<!--/.container-->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/offcanvas/offcanvas.js"></script>
<script type="text/javascript">
    $(function () {
        $('#add_to_cart').click(function () {
            var productId = $('#product_id').val();
            var productName = $('#product_name').text();
            var price = $('#price').text();
            var category = $('#category').text();
            var description = $('#description').text();
            $.ajax({
                url: "../client/cart.do",
                type: "GET",
                data: {
                    action: 'insert',
                    productId: productId,
                    productName: productName,
                    price: price,
                    category: category,
                    description: description
                },
                success: function (data) {
                    console.log(data);
                },
                dataType: 'text'
            });
        });
    });
</script>
</body>
</html>
